<template>
    <div>
        <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
            <Row :gutter="24" type="flex">
                <Col v-bind="grid">
                    <Input v-model="data.name" placeholder="请输入患者姓名/手机号" element-id="name" />
                </Col>
                <Col v-bind="grid">
                    <FormItem label="患者状态" prop="dataState" label-for="dataState">
                        <Select v-model="data.dataState" placeholder="患者状态" element-id="dataState">
                            <Option :value="0">失效</Option>
                            <Option :value="1">跟进中</Option>
                            <Option :value="2">预约</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="上次归属人" prop="belong_member_name" label-for="belong_member_name">
                        <Select v-model="data.belong_member_name" placeholder="上次归属人" element-id="belong_member_name">
                            <Option :value="0">高玲</Option>
                            <Option :value="1">王艳</Option>
                            <Option :value="2">时宜</Option>
                            <Option :value="3">刘强</Option>
                            <Option :value="4">兰付</Option>
                            <Option :value="5">张三</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="12">
                    <Button class="ivu-fr" type="primary" @click="modal1 = true">分配</Button>
                </Col>
            </Row>
        </Form>
        <Modal v-model="modal1" title="患者分配">
            <Select v-model="model2" filterable multiple>
                <Option v-for="item in userList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </Modal>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            modal1: false,
            model2: '',
            userList: [
                {
                    value: '高玲',
                    label: '高玲'
                },
                {
                    value: '王艳',
                    label: '王艳'
                },
                {
                    value: '张飞',
                    label: '张飞'
                }
            ],
            cityList: [
                {
                    value: '在乎费用',
                    label: '在乎费用'
                },
                {
                    value: '专家',
                    label: '专家'
                },
                {
                    value: '敏感',
                    label: '敏感'
                },
                {
                    value: '远程',
                    label: '远程'
                }
            ],
            model12: [],
            grid: {
                xl: 4,
                lg: 8,
                md: 12,
                sm: 24,
                xs: 24
            },
            collapse: false,
            data: {
                name: '',
                date: '',
                consultant: '',
                personnel: '',
                dataState: '',
                belong_member_name: ''
            },
            rules: {}
        }
    },
    computed: {
        ...mapState('admin/layout', ['isMobile']),
        labelWidth() {
            return this.isMobile ? undefined : 100
        },
        labelPosition() {
            return this.isMobile ? 'top' : 'right'
        }
    }
}
</script>
